import React, { Component } from 'react'
import store from '../../store/index'
console.log('store:', store.getState())

/**
 * 1. redux三大原则
 *
 * 2. class 组件 setState
 */

/**
 *
 * store - 管理，只能store修改
 *
 * 1. 拿数据-渲染
 * 2. 修改- dispatch告诉redux,你想修改什么，redux就会在reducer内部修改。返回新的数据结果
 * 3. 订阅
 *
 */

// dispatch
// getState
// subscribe
export default class index extends Component {
  constructor(props) {
    super(props)
    this.state = store.getState()
    // store. setState
    this.subscribe = store.subscribe(() => {
      // class组件中，只有调用setState才能渲染更新数据
      this.setState(store.getState())
    })
    console.log('取消函数。', this.subscribe)
  }

  componentWillUnmount() {
    // 组件优化
    this.subscribe()
  }

  render() {
    const { list } = this.state
    console.log(list, 'list')
    return (
      <div>
        {list.map((item) => {
          return (
            <h2
              key={item.id}
              onClick={() => {
                // 命令 一般是一个对象称之为 action = {}
                store.dispatch({
                  type: 'add',
                  payload: { num: 5 },
                })
              }}
            >
              {item.count}
            </h2>
          )
        })}
      </div>
    )
  }
}
